<template>
  <div class="paper-result">
    <div class="exam-result-content" ref="pdfDom">
      <h1>中国铁路北京局集团有限公司天津机务段职工个人分析</h1>
      <div class="userImage">
        <img :src="portraitUrl" alt="" />
      </div>
      <div class="base-message">
        <a-descriptions bordered :column="3" title="基本信息">
          <a-descriptions-item label="姓名:">
            {{ employeeName }}
          </a-descriptions-item>
          <a-descriptions-item label="工号:">
            {{ workerId }}
          </a-descriptions-item>
          <a-descriptions-item label="所属站段:">
            {{ section }}
          </a-descriptions-item>
          <a-descriptions-item label="车间/科室:">
            {{ shop }}
          </a-descriptions-item>
          <a-descriptions-item label="小组:"> {{ group }} </a-descriptions-item>
          <a-descriptions-item label="考试次数:">
            {{ examTimes }}
          </a-descriptions-item>
          <a-descriptions-item label="最好成绩:" :span="3">
            {{ highScore }}分
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="exam-list">
        <div class="exam-des">
          <p class="title" style="margin: 20px 0">个人总结:</p>
          <p>{{ examForm.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getExamResult, getExamImg } from '@/api/examination'
export default {
  data() {
    return {
      employeeName: '',
      workerId: '',
      examId: '',
      tabValue: 1,
      examName: '',
      section: '',
      shop: '',
      group: '',
      examTimes: '',
      portraitUrl: '',
      highScore: '',
      examList: [],
      examForm: {
        score: 0,
        fatal: true,
        commitTime: '',
        captureUrl: '',
        content: ''
      }
    }
  },
  mounted() {
    this.workerId = this.$route.query.workerID
    this.examId = this.$route.query.examID
    this.getExamResultData()
  },
  methods: {
    tableChange(e) {
      this.examForm.score = this.examList[this.tabValue - 1].score
      this.examForm.fatal = this.examList[this.tabValue - 1].fatal
      this.examForm.commitTime = this.examList[this.tabValue - 1].commitTime
      this.examForm.content = this.examList[this.tabValue - 1].content
      //this.examForm.captureUrl = this.examList[this.tabValue - 1].captureUrl
      var captureUrl = this.examList[this.tabValue - 1].captureUrl.replace("http://81.68.170.132:8082/api","")
      this.getBase64(captureUrl,2)
    },
    cancel() {
      window.close()
    },
    //获取试卷详情
    getExamResultData() {
      getExamResult({
        workerId: this.workerId,
        examId: this.examId
      })
        .then((res) => {
          if (res.code === 0) {
            this.examList = res.data.examContents
            this.employeeName = res.data.employeeName
            this.examName = res.data.examName
            this.section = res.data.section
            this.shop = res.data.shop
            this.group = res.data.group
            this.highScore = res.data.highScore
            //this.portraitUrl = res.data.portraitUrl
            var portraitUrl = res.data.portraitUrl.replace("http://81.68.170.132:8082/api","")
            this.examTimes = res.data.examTimes
            this.tableChange()
            this.getBase64(portraitUrl,1)
          } else {
            this.$message.destroy()
            this.$message.error(res.msg)
          }
        })
        .catch((err) => {
          this.$message.destroy()
          this.$message.error(err)
        })
        .finally(() => {})
    },
    getBase64(url,type) {//type:1头像路径2是现场图片
      getExamImg(url).then((res) => {
        if(type===1){
          this.portraitUrl =
          'data:image/jpeg;base64,' + this.arrayBufferToBase64(res)
        } else {
          this.examForm.captureUrl =
          'data:image/jpeg;base64,' + this.arrayBufferToBase64(res)
        }
      })
    },
    arrayBufferToBase64(buffer) {
      var binary = ''
      var bytes = new Uint8Array(buffer)
      var len = bytes.byteLength
      for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
      }
      return window.btoa(binary)
    }
  }
}
</script>

<style lang="stylus" scoped>
.paper-result
  padding 20px
  height 100%
  overflow auto
  .exam-result-content
    margin-top 15px
    position relative
    border 1px solid #e8e8e8
    padding 20px 150px
    box-sizing border-box
    h1
      text-align center
      font-size 28px
      font-weight bold
    h3
      text-align center
      font-size 25px
      margin-top 50px
    .userImage
      position absolute
      right 1px
      top 40px
      img
        width 90px
        height 120px
        object-fit contain
        border 1px solid #e8e8e8
    .base-message
      margin-top 30px
      position relative
    .exam-list
      h3
        margin-bottom 50px
      p.title
        margin-bottom 20px
        color rgba(0, 0, 0, 0.85)
        font-weight bold
        font-size 16px
        line-height 1.5
    .exam-scene-img
      img
        height 200px
</style>
<style media="print">
@page {
  size: auto;
  margin: 10mm 10mm 0 10mm;
}
.exam-result-content {
  margin-top: 15px;
  position: relative;
  border: 1px solid #e8e8e8;
  padding: 20px 150px;
  box-sizing: border-box;
}
h1 {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
}
h3 {
  text-align: center;
  font-size: 25px;
  margin-top: 50px;
}
.userImage {
  position: absolute;
  right: 1px;
  top: 40px;
}
.userImage img {
  width: 90px;
  height: 120px;
  object-fit: contain;
  border: 1px solid #e8e8e8;
}
.base-message {
  margin-top: 30px;
  position: relative;
}

.exam-list h3 {
  margin-bottom: 50px;
}
.exam-list p.title {
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}

.exam-scene-img img {
  height: 200px;
}
</style>